<!DOCTYPE html>
<html>
    <head>
        <title>个人简介</title>
        <meta charset="utf-8">
        <style>
            #banner{
                
                width: 100%;
                height: 180px;
                background-image: url(bg2.jpg);
                /*background-position: 50% 50%;*/
                position: fixed;
                top: 0;
                text-align: center;
            }
            
            #fengche-father{
                width: 180px;
                height: 180px; 
                position: relative;
            }

            #fengche{
                width: 170px;
               height: 100%;
                /*background-color: red;*/
                background-image: url(fengche.png);
                position: absolute;
                margin: auto;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;              
                background-size: 100% 100%;
                animation: xuanzhuan 0.8s linear;
                animation-iteration-count: infinite; 
            }

            #leader{
                /*background-color: red;*/
                position: absolute;
                width: 100%;
                bottom: 0;
                right: 50%;
                transform: translateX(50%);
                /*margin: 0 auto;*/
                display: inline;
            }
            ul{
                list-style: none;
            
            }

            li{
               display:inline; 
               font-size: 30px;
               color: blue;
               padding: 40px;
               
            }

            a{
                text-decoration:none;
                
            }
            li a:hover{
                color: red;
            }
            #container{
                width: 900px;
                margin: 300px auto;
            }

            #massage{
                width: 100%;
                /*background-color:darkgray;*/
                text-align: center;
                margin-top: 50px;
                margin-bottom: 100px;

            }

            #donghua{
                width: 180px;
                height:180px;
                background-color: transparent;
                /*margin: 0 auto;*/
                position: relative;
                margin-left: -20px;
                margin-top: -65px;
                margin-bottom: 20px;
                border-radius: 50%;
            }

            #dong1{
                position: absolute;
                width: 10%;
                height: 10%;
                /*margin-left: 20px;*/
                background-color: black;
                animation: yidong1 5s ;
                animation-iteration-count: infinite; 
                border-radius: 80%;

            }
             #dong2{
                position: absolute;
                width: 10%;
                height: 10%;
                /*margin-left: 20px;*/
                background-color: black;
                animation: yidong2 5s ;
                animation-iteration-count: infinite; 
                border-radius: 80%;

            }


            #ideas{
                margin-top: -60px;
            }
            body{
                margin: 0;
                margin-bottom: 80px;
                background-color:#4d7cad;
                display: flex;
            }

            #school{
                background-image: url(huel.jpg);
                background-size: 100% 100%;
                height: 400px;
                position: relative;
                z-index: -1;
            }

            .classmates-image{
                 width: 200px;
                 height: 200px;
                 border-radius: 50%;
                 position: absolute;
            }  

              #little-school2{
                 right: 0; 
            }

              #little-school3{
                 bottom: 50px;
                 right: 50%;
                
                /*transform: translateX(50%);*/
            }

            .pic{
                width: 100%;
            }
            #pic-two{
                width: 50px;
            }

            .text{
                text-indent: 2em;
            }
            
            @keyframes xuanzhuan{
                0%{
                    transform:rotateZ(0);
                    width: 100%;
                    height: 100%;                  
                    }
                25%{
                    transform:rotateZ(90deg);
                    width: 70%;
                    height: 70%;
                   
                }
                50%{
                    transform:rotateZ(180deg);
                    width: 40%;
                    height: 40%;
                }
                75%{
                    transform:rotateZ(270deg);
                    width: 70%;
                    height: 70%;
                    }
                100%{
                   transform:rotateZ(360deg); 
                   width: 100%;
                   height: 100%;
                   
                }
            }

            @keyframes yidong1{
                0%{
                    top: 0;
                    left: 0px;
                    background-color: black;
                    transform: rotate(0);
                }
                25%{
                    top: 0;
                    left: 118px;
                    background-color: red;
                    transform: rotate(90deg);
                }
                50%{
                    top: 47px;
                    left: 118px;
                    background-color:blue;
                    transform: rotate(180deg);
                }
                75%{
                    top: 0px;
                    left: 118px;
                    background-color: pink;
                    transform: rotate(270deg);
                }
                 100%{
                    top: 0;
                    left: 0;
                    background-color: black;
                    transform: rotate(360deg);
                }
            }

            @keyframes yidong2{
                0%{
                    top: 0;
                    left: 0px;
                    background-color: black;
                    transform: rotate(0);
                }
                25%{
                    top: 47px;
                    left: 0px;
                    background-color: red;
                    transform: rotate(90deg);
                }
                50%{
                    top: 47px;
                    left: 118px;
                    background-color: pink;
                    transform: rotate(180deg);
                }
                75%{
                    top: 47px;
                    left: 0px;
                    background-color: blue;
                    transform: rotate(270deg);
                }
                 100%{
                    top: 0;
                    left: 0;
                    background-color: black;
                    transform: rotate(360deg);
                }
            }


        </style>
    </head>
    <body>

        <div id = "banner">
            <div id="fengche-father"> 
                <div id="fengche"></div>
            </div>
            <div id = "leader">
                <ur>
                    <a href=""><li>主页</li></a>
                    <a href="#geren"><li>个人简介</li></a>
                    <a href="#classmates"><li>我的同学</li></a>
                    <a href="#school"><li>我的学校</li></a>
                    <a href="#home"><li>我的家乡</li></a>
                </ur>
            </div>
        </div>

        <div id = "container">

            <a name = "geren"><h1 style="text-align:center">单威威</h1></a>
            <hr color="#031324" align="center" width="200px">
            <a name = "geren"><h2>个人简介</h2></a>
            <div id = "donghua">
                <div id = "dong1">                       
                </div>
                <div id  = "dong2">
                </div>
            </div>

            <div id = "massage">                   
                <div id = "ideas">
                    <p>我的名字是单威威</p>
                    <p>就读于河南财经政法大学</p>
                    <a name = "classmates"><p>计算机与信息工程学院</p></a>
                    <p>我的家乡在美丽的中原城市——周口</p>
                    <p>现在在智游学习前端技术</p>
                    <a name = "school"><p>我喜欢看电影和旅游</p></a>
                    <p>希望和大家多多交流</p>
                </div>
            </div>
                
            <h2>我的同学</h2>
            <p class = "text"><b style="color:#091655">我可爱的同学们：</b></p>
            <div id = "school">
                <img class="classmates-image" id = "little-school1" src="classmate1.jpg">
                <img class="classmates-image" id = "little-school2" src="classmate3.jpg">
                <img class="classmates-image" id = "little-school3" src="classmate2.jpg">
            </div>

            <hr color="#031324">

            <h2>我的学校</h2>
            <p class = "text"><b style="color:#091655">河南财经政法大学</b>（Henan University of Economics and Law）位于河南省郑州市，河南财经政法大学由原河南财经学院和原河南省政法管理干部学院于2010年3月合并组建而成，是一所经中华人民共和国教育部批准成立的，以经济学、管理学和法学为主的省属公办全日制普通高等学校，是河南省博士学位授予权立项建设单位、河南省重点支持建设的骨干高校之一。</p>
            <img class = "pic" src="huel.jpg" alt="no fund picture">

            <hr color=#031324>

            <a name = "home"><h2>我的家乡</h2></a>
            <p class = "text"><b style="color:#091655">周口市</b>位于中国河南省东南部，地处沙河、颍河、贾鲁河交汇处。东临安徽省阜阳市，西接河南漯河市、许昌市，南与驻马店市相连，北与开封、商丘市接壤。周口市历史悠久，文化灿烂，距今有6000多年的文明史。太昊伏羲氏在此建都，炎帝神农氏播种五谷，开创了中华民族的远古文明。周口古属陈国，《诗经.陈风》赫然在目。战国末期，为楚都所在地，史称郢陈。秦末农民起义，陈胜在此建立张楚政权。两汉时期，陈为皇子领地，繁荣昌盛，富甲一方。魏晋以来，以淮阳为中心历次设郡置府。</p>
            <img class = "pic" src="home.jpg" alt="no fund picture">
            <hr color=#031324>

        </div>

    </body>

</html>